iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0
Mobile Development

Android 開發者養成計畫:從程式邏輯到作品集實戰系列 第 3 篇

Day3- 學會把積木排整齊!Layout 佈局詳解

  • 分享至 

  • xImage
  •  

在第二天,已經學會了如何放入 TextView 和 Button 這兩種基本的「樂高積木」,也讓它們有了最簡單的互動能力。

但你可能會發現,積木好像有點難以控制,它們會隨意地出現在畫面上。別擔心,今天我們要來學習如何把這些積木排得整整齊齊!

什麼是佈局 (Layout)?

佈局就像是一個「容器」,它規定了你放在裡面的元件(積木)要如何排列。Android App 最常見的佈局有兩種:

1. LinearLayout (線性佈局)

  • 簡單比喻: 想像它是一個「一條直線的收納盒」。你放進去的積木,只會乖乖地排成 一條直線,可以是水平的,也可以是垂直的。
  • 優點: 概念簡單,非常適合用來排列一排按鈕、或是一欄文字。

2. ConstraintLayout (約束佈局)

  • 簡單比喻: 想像它是一個「可以任意定位的畫布」。你放進去的積木,可以透過設定「約束線」來決定它的位置,例如:「這顆按鈕要放在畫面中央」、「這塊文字板要貼齊左邊,並在按鈕的上方」。
  • 優點: 彈性極高,是目前 Android Studio 預設且最強大的佈局,可以應付絕大多數複雜的介面設計。

實作時間:用 LinearLayout 排排看

我們來動手試試看 LinearLayout。

  1. 開啟你的 activity_main.xml 檔案。
  2. 在畫面左側的 Palette 面板中,找到 Layouts 分頁。
  3. 找到 LinearLayout (Vertical),將它拖曳到畫面中央。
  4. 接著,將昨天做好的 TextView 和 Button 拖曳進這個 LinearLayout 裡。
  5. 你會發現,無論你怎麼拖,這兩個元件都只會乖乖地 垂直 排列。
  6. 如果你想讓它們水平排列,只需要在畫面右側的 Attributes 面板中,找到 orientation 屬性,將它從 vertical 改成 horizontal。

實作時間:用 ConstraintLayout 擺擺看

ConstraintLayout 是你建立專案時,預設的那個佈局,它擁有強大的視覺化操作功能。

  1. 在 activity_main.xml 的畫面中,點擊任何一個元件。
  2. 你會發現元件的四邊和中央出現了小圓點。這些小圓點就是用來設定 「約束線 (Constraint)」 的。
  3. 如何設定約束線?
    • 用滑鼠點住小圓點,拖曳到畫面的四邊,或拖曳到另一個元件的小圓點上。
    • 範例:如果你想讓 Button 放在畫面中央,只需要拖曳它的四邊到畫面的四邊,App 就會自動計算並將它置中。
    • 範例:如果你想讓 Button 放在 TextView 的正下方,只需要拖曳 Button 上面的約束線,到 TextView 下面的約束線上,它們就會被綁定在一起。

今日總結

今天我們學會了 App 介面排版最重要的概念:

  • 佈局 (Layout) 就像是排版的容器,決定了元件的排列方式。
  • LinearLayout 讓我們可以輕鬆地將元件排成一排。
  • ConstraintLayout 則提供了強大的彈性,讓我們可以隨心所欲地將元件放在任何我們想要的位置。

當你在設計 App 畫面時,就可以開始思考:「我要用什麼佈局,才能讓我的元件排得最漂亮、最有效率?」

明天,我們要回到元件的學習,認識 App 的「留言本」—— EditText,讓你的 App 可以接收使用者的輸入,並做出更進階的互動!

明天見!


上一篇
Day2- 文字標籤 (TextView) 與按鈕 (Button)
下一篇
Day4- App 也能聽你說話!文字輸入框 (EditText)
系列文
Android 開發者養成計畫:從程式邏輯到作品集實戰 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言